<template>
  <div>
    <!-- <h3>当前最新的count值为:{{ $store.state.count }}</h3> -->
    <!-- <h3>当前最新的count值为:{{ count }}</h3> -->
    <h3>{{ $store.getters.showNum }}</h3>
    <button @click="add">+1</button>
    <button @click="addN">+N</button>
    <button @click="add3">+1 Async</button>
    <button @click="add3N">+N Async</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    add() {
      // this.$store.state.count++  //错误，不能直接操作项目共享全局数据
      this.$store.commit('add')
    },
    addN(N) {
      //commit 的作用，就是调用 某个 mutation 函数
      this.$store.commit('addN', 3)
    },
    //异步地让 count 自增+1
    add3() {
      //这里的 dispatch 函数，专门用来触发 action
      this.$store.dispatch('addAsync')
    },
    add3N() {
      this.$store.dispatch('addNAsync', 3)
    }
  }
}
</script>
